<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery图片跟随鼠标晃动效果</title>
    <script type="text/javascript" src="js/packed_jquery.min6301986802.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function () {
            var index_div_pro = [{
                sx: 0,
                sy: 0,
                mw: 3,
                mh: 1,
                bx: 8.4,
                by: 10.4,
                rx: -0.6
            },
            {
                sx: 35,
                sy: 0,
                mw: 3,
                mh: 0.5,
                bx: 6.4,
                by: 8.4,
                rx: -0.1
            },
            {
                sx: 785,
                sy: 90,
                mw: 0.3,
                mh: 0.1,
                bx: 6.5,
                by: 7.4,
                rx: -0.1
            }];

            var ePageX = null;
            var ePageY = null;

            function getMousePos(expression) {
                if (ePageX == null || ePageY == null) return null;
                var _x = $(expression).position().left;
                _x += ePageX - $(expression).parent().position().left;
                var _y = $(expression).position().top;
                _y += ePageY - $(expression).parent().position().top;
                return {
                    x: _x,
                    y: _y
                }
            };

            var index_xh = setInterval(function () {
                for (var i = 0; i < 3; i++) {
                    var mousepos = getMousePos("#indexg" + i);
                    if (mousepos != null) {
                        var left = parseInt($("#indexg" + i).css("left"));
                        var l = left + (index_div_pro[i].sx + index_div_pro[i].mw - (mousepos.x - 100) / index_div_pro[i].bx * index_div_pro[i].rx - left) * 0.2;
                        var top = parseInt($("#indexg" + i).css("top"));
                        var t = top + (index_div_pro[i].sy + index_div_pro[i].mh - (mousepos.y - 100) / index_div_pro[i].by - top) * 0.2;
                        $("#indexg" + i).css({
                            left: l,
                            top: t
                        })
                    }
                }
            },
            15);

            $("body").mousemove(function (event) {
                event = event || window.event;
                ePageX = event.pageX;
                ePageY = event.pageY;
                console.log(ePageX)
            });
              
        });
    </script>
    <link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id="indexgs"> 
        <img id="indexg2" src="images/g3.png" width="364" height="308"/>
        <div id="indexg0"> <img src="images/g1.png" width="918" height="508"/> <a href="#"></a> </div>
        <div id="indexg1"> <img src="images/g2.png" width="353" height="538"/> <a href="#"></a> </div>
    </div>
    <div style="text-align:center;clear:both">
      <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
      <br>
      <p>代码整理：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人之家</a></p>
    </div>
</body>
</html>
